<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--
  This file contains a wrapper to search for a commit's summary view. Most of
  the important functions are contained in commit_view.html
  -->
  <title>Commit Viewer</title>
  <link href="/css/bootstrap.css" rel="stylesheet">
  <link href="/css/bootstrap-responsive.css" rel="stylesheet">
  <link href="/css/dashboard.css" rel="stylesheet">
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
  </style>
  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

<!-- The majority of our javascript -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="/js/jquery-ui/css/custom-theme/jquery-ui-1.8.23.custom.css" />
<script type="text/javascript" src="/js/jquery-ui/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="/js/json2.js"></script>

<!-- our js utils file, shared with index.html -->
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/chartutils.js"></script>
<script type="text/javascript" src="/js/commit_search.js"></script>

<!-- the AJAX API for google charts -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart', 'table']});

// These apply to all charts in commit_view.html
var chartOptions = {width: 720,
                   height: 500};

$(function() {
  $("#chartdialog").dialog({ autoOpen: false});
  $("#configInfo").dialog({ autoOpen: false, width: 800, position: ['right', 60]  });

  $("#chartdialog").bind("dialogclose", function(event, ui) {
    $('#status').html("");
  });
});

  </script>

  <link rel="shortcut icon" href="/images/webm-48px.png">
  <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">

</head>
<body>
  <header>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="/">WebM Dashboard</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              {% if user %}
              Logged in as {{ user.nickname }} [<a href="{{ logout_url }}">Sign Out</a>]
              {% else %}
              <a href="{{ login_url }}">Sign In</a>
              {% endif %}
            </p>
            <ul class="nav">
              <li><a href="/explore">Explorer View</a></li>
              <li><a href="/commit_viewer/">Commit View</a></li>
              <li><a href="#helpModal" data-toggle="modal">Help</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="modal hide fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="helpModalLabel">About this page</h3>
      </div>
      <div class="modal-body">
        <p> Use the search button to look for individual commits. The symbols next to the metric and config info represent how much improvemnt this commit had over it's baseline. To see an individual chart, click on the triangle or square. When viewing a RD curve graph, click on the data points to see the configuration required to reproduce.
        </p>
      </div>
    </div>

  </header>


<div class="container-fluid">
<table class="multicommits" width="100%">
<tr><td>
    <div class="row-fluid" id="">
      <div class="span6">
        <h3>Most Recent Commits</h3>
      </div>
      <div class="span6">
        <a href="#searchModal" data-toggle="modal" id="searchbutton" class="btn pull-right">Search Commits</a>
      </div>
    </div>
</tr></td>

{% for commit, runs in formatted_commits %}
<tr>
<td>

    <div class="row-fluid" id="">
      <div class="span12">
        <h4>Commit Summary: {{ commit.commit }}</h4>
      </div>
    </div>

    <div class="row-fluid" id="">
      <div class="span6">

        <table class="commitlog">
          <tr id="{{commit.commit}}_row">
            <td>{{ commit.commit }}</td>
            <td>{{ commit.date }}</td>
          </tr>
          <tr id="{{commit.commit}}_row2">
            <td></td>
            <td>{{ commit.author }}</td>
          </tr>
          <tr id="{{commit.commit}}_row3">
            <td></td>
            <td>
              <div><strong>{{ commit.subject }}</strong></div>
              <div id="{{commit.commit}}_body1">
                {% for line in commit.body %}
                  {{ line }}<br>
                {% endfor %}
              </div>
            </td>
          </tr>
          <tr id="{{commit.commit}}_row4">
            <td></td>
            <td>
              <div> Branches:</div>
              <div id="{{commit.commit}}_body2">
                {% if commit.branches %}
                  {% for br in commit.branches %}
                    {{ br }}<br>
                  {% endfor %}
                {% else %}
                  None
                {% endif %}
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="span6" style="overflow: auto;">

        <!-- Hide the threshold for now
        Threshold: {{threshold}}% <input type="button" value="Change" onclick="openThresholdDialog()"/>
        <br>

        <div id="thresholdDialog"> Please choose a new threshold:
        <form id="thform" name="thform" onsubmit="submitThreshold()" style="float:left">
        <input type='text' name='newThreshold' />
        <input type='button' value="Submit" onclick="submitThreshold()">
        </form>
        </div>
        -->

        <!-- Elif statement not supported in Django 1.2 -->
        <table class="resultgrid">
          {% for run in runs %}
          <tr>
            <th>{{ run.metric }}</th>
            <th>{{ run.config }}</th>
            <td>
            {% for e in run.runs %}
              {% if e.class == 'good major' or e.class == 'good minor' %}
              <dt class="{{e.class}}" onclick='{{e.clickcommand}}' title="{{ e.filename }}, {{e.value}}" >&#9650;</dt>
              {% else %}
                {% if e.class == 'bad major' or e.class == 'bad minor' %}
                <dt class="{{e.class}}" onclick='{{e.clickcommand}}' title="{{ e.filename }}, {{e.value}}">&#9660;</dt>
                {% else %}
                <dt class="unchanged" onclick='{{e.clickcommand}}' title="{{ e.filename }}, {{e.value}}">&#9724;</dt>
                {% endif %}
              {% endif %}
            {% endfor %}
          {% endfor %}
          </td>
          </tr>
        </table>
      </div>

    </div>



  </div>

</td>
</tr>
{% endfor %}
</table>
<div> <!-- end of container fluid -->
{% include "templates/footer.html" %}

<!-- The search dialog -->
    <div class="modal hide fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="searchModalLabel">Search for Commits</h3>
      </div>
      <div class="modal-body">

      <div id="searchCommand" style="float:left">Please enter a commit to display, or an email to look for:</div>
      <form name="myform">
      <input type='text' name='query' />
      <input type='button' id="submitButton" value="Search" onClick="javascript: searchcommits(this.form)">
      </form>

      </div>
    </div>


<div id="chartdialog">
  <div id="chartdiv"></div>
  <div id="status"></div>
</div>
<div id="configInfo"></div>
<script src="/js/bootstrap.min.js"></script>

</body>
</html>
